<template>
<view class="weather">
  <image class="weather-bgimg" src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113160540_54840.png"></image>
  <view class="weather-title">
    <image class="weather-local" src="/static/images/weather/local.png"></image>
    <view class="weather-name">
      <region-picker :value="region" @change="pickCity">
        {{region[1]}} {{region[2]}}
      </region-picker>
    </view>
  </view>
  <view class="observe">
    <text>{{observe.degree}}℃</text>
    <text class="today-weather">{{observe.weather}}</text>
  </view>
  <view class="wind-air">
    <view class="wind">
      {{forecast_24h[1].day_wind_direction}}  {{forecast_24h[1].day_wind_power}}级
    </view>
    <view class="line"></view>
    <view class="air">湿度{{observe.humidity}}%</view>
  </view>
  <view class="next-weather">
    <view v-for="(item, date) in forecast_24h" :key="date" class="weather-item">
      <view class="date">{{item.time}}</view>
      <view class="icon-box">
        <image class="weather-icon" :src="item.icon"></image>
      </view>
      <view class="max-degree">{{item.max_degree}}</view>
      <view class="min-degree">{{item.min_degree}}</view>
    </view>
  </view>
  <view class="index">
    <view class="index-title">天气指数</view>
    <view class="index-info">
      <view v-for="(item, index) in index" :key="index" class="index-item">
        <view class="index-name">{{item.name}}：</view>
        <view class="index-detail">{{item.info}}</view>
      </view>
    </view>
  </view>
</view>
<!-- <collection collectionData="{{collectionData}}" scroll="{{scroll}}" onopenCollection="openCollection" oncloseCollection="closeCollection"></collection> -->
</template>

<script>
// pages/index/weather/weather.js
const util = require("../../../../utils/util.js");
const app = getApp(); // const bmap = require('../../../../utils/bmap-wx');
// var BMap = new bmap.BMapWX({
//   ak: 'ntaIuYwqxYZYmwSEUpdOmmwPCy28qnFU'
// });
// const bmap = require('../../../../utils/bmap-wx');
// var BMap = new bmap.BMapWX({
//   ak: 'ntaIuYwqxYZYmwSEUpdOmmwPCy28qnFU'
// });
var QQMapWX = require("../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
const filterIndex = ["穿衣", "雨伞", "感冒", "晨练", "紫外线强度", "晾晒", "洗车", "钓鱼", "旅游", "运动"];
let toggleCollection = true;

export default {
  data() {
    return {
      forecast_24h: {},
      index: {},
      observe: {},
      region: [],
      scroll: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // util.colleation(this, "天气查询");
    toggleCollection = true;
    let province = options.province ? decodeURIComponent(options.province) : "广东省";
    let city = options.city ? decodeURIComponent(options.city) : "深圳市";
    let county = options.district ? decodeURIComponent(options.district) : "罗湖区";

    if (!options.province && !options.city && !options.district) {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let province = res.result.address_component.province;
          let city = res.result.address_component.city;
          let county = res.result.address_component.district;
          this.setData({
            region: [province, city, county]
          });
          var localInfo = {
            province,
            city,
            county
          };
          this.getWeather(localInfo);
        }
      });
    } else {
      this.setData({
        region: [province, city, county]
      });
      var localInfo = {
        province,
        city,
        county
      };
      this.getWeather(localInfo);
    } // let province = options.province ? decodeURIComponent(options.province) : app.province;
    // let city = options.city ? decodeURIComponent(options.city) : app.city;
    // let county = options.county ? decodeURIComponent(options.county) : (app.district === '全部' ? '' : app.district);
    // this.setData({
    //   region: [province, city, county],
    // });
    // var localInfo = { province, city, county };
    // this.getWeather(localInfo);

  },
  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: "本地宝天气查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    getWXLocation() {},

    getWeather(localInfo, region) {
      uni.request({
        url: 'https://wis.qq.com/weather/common',
        data: {
          source: "xw",
          weather_type: "observe|forecast_24h|index",
          province: localInfo.province,
          city: localInfo.city,
          county: localInfo.county
        },
        success: res => {
          if (res.data.data.observe.degree) {
            let weatherInfo = JSON.parse(JSON.stringify(res.data.data));

            for (let weather in weatherInfo.forecast_24h) {
              switch (weather) {
                case '0':
                  {
                    weatherInfo.forecast_24h[weather].time = '昨天';
                  }
                  break;

                case '1':
                  {
                    weatherInfo.forecast_24h[weather].time = '今天';
                  }
                  break;

                case '2':
                  {
                    weatherInfo.forecast_24h[weather].time = '明天';
                  }
                  break;

                case '3':
                  {
                    weatherInfo.forecast_24h[weather].time = '后天';
                  }
                  break;

                default:
                  {
                    weatherInfo.forecast_24h[weather].time = `周${this.getWeek(new Date(weatherInfo.forecast_24h[weather].time).getDay())}`;
                  }
              }

              ;
              weatherInfo.forecast_24h[weather].icon = `https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/weather/day/${weatherInfo.forecast_24h[weather].day_weather_code}.png`;
            }

            let index = [];

            for (let itemIndex in weatherInfo.index) if (filterIndex.findIndex(v => weatherInfo.index[itemIndex].name === v) >= 0) {
              if (weatherInfo.index[itemIndex].name !== "紫外线强度") weatherInfo.index[itemIndex].name = `${weatherInfo.index[itemIndex].name}指数`;
              index.push(weatherInfo.index[itemIndex]);
            }

            this.setData({
              forecast_24h: weatherInfo.forecast_24h,
              index,
              observe: weatherInfo.observe,
              region
            });
          } else {
            uni.showToast({
              title: '暂无天气信息',
              icon: 'none'
            });
          }
        }
      });
    },

    getWeek(day) {
      const week = ['日', '一', '二', '三', '四', '五', '六'];
      return week[day];
    },

    pickCity(e) {
      var localInfo = {
        province: e.detail.value[0],
        city: e.detail.value[1],
        county: e.detail.value[2]
      };
      this.getWeather(localInfo, e.detail.value);
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* pages/index/weather/weather.wxss */

.weather-bgimg {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
}

.weather-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 66rpx;
}

.weather-name {
    color: #ffffff;
    font-size: 30rpx;
}

.weather-local {
    height: 31rpx;
    width: 26rpx;
    margin-right: 20rpx;
}

.observe {
    margin-top: 24rpx;
    text-align: center;
    color: #ffffff;
    font-size: 150rpx;
}

.today-weather {
    font-size: 32rpx;
    margin-left: 24rpx;
}

.wind-air {
    display: flex;
    justify-content: space-around;
    margin-top: 66rpx;
    color: #ffffff;
    align-items: center;
}

.wind, .air {
    width: 49%;
    text-align: center;
}

.line {
    width: 2%;
    height: 28rpx;
    border-left: 2rpx solid #ffffff;
}

.line {
    border-left: 2rpx solid #ffffff;
}

.next-weather {
    display: flex;
}

.weather-icon {
    width: 48rpx;
    height: 48rpx;
    margin: 18rpx 0;
}

.next-weather {
    display: flex;
    justify-content: space-around;
    margin: 0 18rpx;
    margin-top: 14rpx;
    padding: 36rpx 24rpx;
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
    font-size: 28rpx;
}

.weather-item {
    text-align: center;
}

.index {
    margin-top: 24rpx;
}

.index-title {
    text-align: center;
    font-size: 36rpx;
    color: #ffffff;
}

.index-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 20rpx;
    margin-top: 16rpx;
    padding: 34rpx 64rpx;
    font-size: 28rpx;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
}

.index-item {
    display: flex;
    width: 45%;
    margin-top: 14rpx;
}
</style>